<template>
  <el-container class="ym-maker">
    <el-aside width="175px">
      <div class="elements" v-if="elements">
        <div v-if="elements">
          <h5>组件</h5>
          <draggable
            tag="ul"
            :list="elements"
            v-bind="left"
          >
            <li v-for="(item, index) in elements" :key="index" class="element-label">
              <a>
                <i class="icon iconfont" :class="item.icon"></i>
                <span>{{item.label}}</span>
              </a>
            </li>
          </draggable>
        </div>
      </div>
    </el-aside>
    <el-main>
      <el-form label-width="80px" v-bind="form">
        <draggable
          :list="fields"
          v-bind="right"
          @add="handleAddField"
          class="form-fields ym-form-display"
          tag="el-row"
          :gutter="20"
          animation="1000"
        >
          <el-col
            v-for="(f, index) in fields"
            :key="f.__index__"
            :span="f.col || 24"
            @click.native="setConfig(f, index)"
          >
            <ym-form-field v-bind="f" />
          </el-col>
        </draggable>
      </el-form>
    </el-main>
    <el-drawer
      title="配置面板"
      :visible.sync="drawer"
    >
      <div class="el-main">
        <ym-form
          :value="field"
          :fields="definition"
          @input="onInput"
          @change="onInput"
          label-position="top"
          size="mini"
        />
      </div>
    </el-drawer>
  </el-container>
</template>

<script>
import Draggable from 'vuedraggable'
import * as Element from '@/store/elements'
import * as Ui from '@/store/elementui'
import YmForm from "@/ym/components/form/YmForm";
import YmFormField from "@/ym/components/form/YmFormField";
import Util from '@/util'

export default {
  data () {
    const name = Element.Pearls[Element.NAME]
    name[Element.OPTIONS] = [
      {
        label: 'name',
        value: 'name'
      },{
        label: 'sex',
        value: 'sex'
      },{
        label: 'address',
        value: 'address'
      }
    ]
    return {
      name,
      // 元素列表
      elements: Element.commons,
      // 表单配置
      form: {},
      // 表单项
      fields: [],
      // 表单域选项列表
      left: {
        group:{
          // 拖曳分组
          name:'element',
          // 可拖出及效果
          pull:'clone',
          // 可拖入
          put:false
        },
        // 可拖曳排序
        sort:false,
        // 影子样式
        ghostClass: 'ghost'
      },
      // 表单可视化部分
      right: {
        group:{
          // 拖曳分组
          name: 'element',
          // 可拖出及效果
          pull: true,
          // 可拖入
          put: true
        },
        // 可拖曳排序
        sort:true,
        // 影子样式
        ghostClass: 'ghost',
        animation: 200,
        // handle: '.drag-element'
      },
      // 表单值，当前没什么用
      // value: {},
      // 属性栏开关
      drawer: false,
      definition: undefined,
      index: 0
    }
  },
  created() {
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    }
  },
  computed: {
    field: {
      set: function (f) {
        this.$set(this.fields, this.index, f)
      },
      get () {
        return this.fields[this.index] || {}
      }
    }
  },
  components: {
    YmFormField,
    YmForm,
    Draggable
  },
  methods: {
    handleAddField (event) {
      const newIndex = event.newIndex - 1
      this.$set(this.fields, newIndex, {
        ...this.fields[newIndex],
        __index__: Util.uuid()
      })
    },
    setConfig (field, index) {
      this.index = index
      const definition = [...Ui.WIDGETS[field[Ui.WIDGET]][Ui.WIDGET][Element.COMPONENTS]]
      definition.unshift(this.name)
      this.definition = definition
      // console.log(this.definition)
      this.drawer = true
    },
    onInput (field) {
      this.field = field
    }
  }
}
</script>

<style scoped lang="less">
@primary-color: #409EFF;
@primary-background-color: #ecf5ff;
.ym-maker {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
.elements {
  background-color: #ffffff;
  height: 100%;
  border-right: #e9e9e9 solid 1px;
}
h5 {
  padding: 8px 12px;
}

ul{
  position: relative;
  overflow: hidden;
  padding: 0 10px 10px;
  margin: 0;
}
.element-label {
  font-size: 12px;
  display: block;
  width: 90%;
  line-height: 26px;
  position: relative;
  float: left;
  left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 1%;
  color: #333;
  border: 1px solid #F4F6FC;

  &:hover{
    color: @primary-color;
    border: 1px dashed @primary-color;
  }

  &>a{
    display: block;
    cursor: move;
    background: #F4F6FC;
    border: 1px solid #F4F6FC;

    .icon{
      margin-right: 6px;
      margin-left: 8px;
      font-size: 14px;
      display: inline-block;
      vertical-align: middle;
    }

    span{
      display: inline-block;
      vertical-align: middle;
    }
  }
}

.ghost {
  border: #a71d5d 1px dashed;
}

.form-fields {
  border: #55a532 solid 1px;
  height: 80%;
  width: 100%;
}

.ym-form-display .el-form-item {
  border: #0086b3 dashed 1px;
}
.ym-form-display .el-col {
  min-height: 104px;
  padding: 20px;
}
</style>
